<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
const emits = defineEmits<{
  (e: "open", value: string): void;
  (e: "close"): void;
}>();

// 倒计时的时间
let time = ref(5);
// 是否同意条款
let checked = ref(true);
onMounted(() => {
  // 页面加载时，倒计时的定时器
  let id = setInterval(() => {
    time.value--;
    // 当time时间为0时，停止定时器
    if (time.value == 0) clearInterval(id);
  }, 1 * 1000);
});

// 打开页面
let open = (path: string) => {
  // checked 为 false，既没有勾选同意条款时，弹出窗口提示用勾选上
  if (!checked.value) return void console.error("请同意并勾选条款");
  // 跳转到页面个人中心页面
  emits("open", "/complaint");
};
</script>

<template>
  <div class="notice">
    <div class="tips">
      <div class="title">
        <span></span>
        <h1>民营经济投诉服务中心</h1>
        <span class="close" @click.stop="emits('close')">&#xeca0;</span>
      </div>
      <pre class="pre">
第一条　为维护民营企业的合法权益，优化政务环境，加快民营经济发展，根据《决定》的规定，制定本办法。
第二条　在本市注册的民营企业、个体工商户，当其合法权益受到本市行政机关行政行为侵害时，可按本办法进行投诉。
第三条　设立民营经济投诉服务中心，投诉中心设在市中小企业局。
第四条　民营经济投诉服务中心受理投诉一律不收费。
第五条　市民营企业维权投诉中心负责履行以下职能：
  （一）受理民营企业、个体工商户对各企业部门的投诉，提出意见移交有关部门处理。
  （二）督促企业有关部门及其他具有行政管理职能的组织对投诉事项进行调查处理。
  （三）定期向市委、市政府汇报投诉事项及办理情况，并根据情况适时向社会公布。
  （四）分析民营企业投诉中涉及的政策性和普遍性问题，进一步改善民营经济发展环境的意见和建议。
  （五）指导区县（自治县、市）民营企业维权投诉中心的业务工作。
  （六）承办市委、市政府交办的其他工作。
第六条　民营企业、个体工商户可采取面谈、信函、传真、电话和上网等方式投诉，投诉内容应包括：投诉人、投诉对象、投诉事由、
投诉人或代理人的通讯地址和联系方式等。
第七条　投诉中心对投诉人的投诉事项必须作好登记，并在5个工作日内将处理情况回复投诉人。
第八条　投诉中心对已受理的投诉事项，分下列情况处理：
  （一）对事实清楚，情节简单，且涉及到行政机关的投诉事项，由投诉中心转交相关部门在7个工作日内办理完毕。
  （二）对须转交有关行政机关进一步调查、研究、处理的投诉事项，由投诉中心3个工作日内提出意见移交有关行政机关处理，承办
行政机关应在20个工作日内办理完毕。
  （三）涉及两个以上行政机关的投诉事项，由投诉中心指定其中一个行政机关负责牵头处理，相关行政机关协办。
  （四）对重大复杂的投诉事项，由投诉中心组织有关行政机关共同处理。
第九条　如投诉人对有关行政机关的答复不满意，并提出了较充分的证据和理由的，由投诉中心责成有关
行政机关重新调查处理或解释说明。
第十条　投诉事项有下列情况之一者，可以终结：
  （一）经投诉中心或有关行政机关协调，争议双方当事人达成一致意见，纠纷得到解决的；
  （二）在受理投诉过程中，投诉人就投诉事项申请仲裁、行政复议或向人民法院提起诉讼的；
  （三）投诉人自愿放弃投诉的；
  （四）投诉人无故不参加协调活动或拒绝与投诉中心联系、配合的；
  （五）投诉事项有其他终结情形的。
第十一条　投诉中心负责查询和督促投诉案件的办理。有关承办部门对投诉中心交办的投诉事项必须及时办理。超过督办期限不答复
投诉人的，由投诉中心向市委、市政府作专题汇报，提出给予直接责任人员及分管领导纪律处分的建议。
第十二条　被投诉部门及其工作人员威胁、压制、刁难、诽谤、打击报复投诉人的，由监察机关查处，构成犯罪的，由司法机关依法
追究刑事责任。
第十三条　投诉中心的工作人员和有关承办部门的工作人员在办理投诉事项中，弄虚作假、拖延推诿、玩忽职守、徇私舞弊、
滥用职权、索取或者收受贿赂、敲诈勒索的，由监察机关或者有关行政机关追究行政责任；构成犯罪的，依法追究刑事责任。
第十四条　本规定施行中的具体问题由市中小企业局负责解释。
第十五条　各企业可参照执行本规定，并可根据本规定，结合本区域实际，制定实施细则。
第十六条　本规定自2022年10月1日起施行。
        </pre
      >
      <label for="ok" class="ok">
        <input
          type="checkbox"
          v-model="checked"
          id="ok"
        />我已阅读并知晓上述条款
      </label>
      <input
        class="btn"
        type="button"
        :class="time ? '' : 'suc'"
        :value="time ? '用户阅读须知倒计时（' + time + 's）' : '确认'"
        @click="open"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.notice {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.49);
  @include flexCenterCenter;
  color: #fff;
  z-index: 10;
}
.tips {
  width: 900px;
  background: #ffffff;
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  width: 100%;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 50px auto 50px;
  color: #333333;
}

.close {
  width: 100%;
  height: 100%;
  @include flexCenterCenter;
  cursor: pointer;
}

h1 {
  height: 24px;
  line-height: 24px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

// 文本内容
.pre {
  width: 835px;
  height: 609px;
  font-size: 14px;
  color: #303133;
  line-height: 28px;
  overflow: auto;
}

.ok {
  font-size: 14px;
  color: #606266;
  @include flexCenterCenter;
  margin: 24px 0px 16px;
  gap: 0px 6px;
  cursor: pointer;
  > input {
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
  }
}

.btn {
  width: 200px;
  height: 36px;
  background-color: #2163e0;
  border-radius: 4px;
  @include flexCenterCenter;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  opacity: 0.5;
  transition: all 0.25s;
  pointer-events: none;
}
.suc {
  opacity: 1 !important;
  pointer-events: auto !important;
}
</style>
